<template>
  <view class="video records-video">
    <NavbarRight
      leftIconColor="#333333"
      bgColor="transparent"
      isBack
      :left="{ imageUrl: leftImageUrl, width: '48rpx' }"
    />
    <view class="background"> </view>
    <view class="tabs-view">
      <u-tabs
        :list="subList"
        active-color="#333333"
        inactive-color="#8D8D8D"
        :bar-style="{
          background: '#DF7922',
          height: '8rpx',
          'border-radius': '4rpx',
        }"
        gutter="20"
        :is-scroll="false"
        @change="subChange"
      ></u-tabs>
    </view>
    <view class="content">
      <scroll-view
        scroll-y
        style="height: 100%; width: 100%"
        @scrolltolower="reachBottom"
        scroll-anchoring
        refresher-enabled="true"
        :refresher-triggered="triggered"
        :refresher-threshold="100"
        refresher-background="transparent"
        @refresherrefresh="onRefresh"
        @refresherrestore="onRestore"
        enable-back-to-top
        :enable-flex="true"
      >
        <view class="scroll-view">
          <NoData v-if="noData" customStyle="margin-top: 0rpx;" />
          <view class="list-view" v-if="records && records.length > 0">
            <RecordCell
              :info="item"
              v-for="(item, index) in records"
              :key="item.id"
              @select="handleClickCell"
              @operate="handleClickOperate"
            ></RecordCell>
            <view
              class="load-more-view"
              v-show="(current == 1 && !loading) || current > 1"
              ><u-loadmore :status="loadStatus" bgColor="transparent"></u-loadmore
            ></view>
          </view>
        </view>
      </scroll-view>
    </view>
    <up-action-sheet
      :actions="listSheet"
      round="12"
      :closeOnClickOverlay="true"
      :closeOnClickAction="true"
      cancelText="取消"
      :show="showSheet"
      @close="selectClose"
      @select="selectClick"
    ></up-action-sheet>
  </view>
</template>

<script setup>
import NavbarRight from "@/components/navbar-right/index.vue";
import NoData from "@/components/no-data";
import RecordCell from "./components/record-cell.vue";

import { onLoad, onUnload } from "@dcloudio/uni-app";
import { reactive, computed, ref, toRaw, nextTick } from "vue";
import { getReciteList,deleteRecite } from "@/api/records";
import { subList } from "@/utils/options/records";
import { getToken } from "@/utils/common";
const leftImageUrl = ref("/static/images/login/loginfanhui@3x.png");
const notification = "records-list-refresh";
onLoad(() => {
  initPage();
  triggered.value = false;
  uni.$on(notification, () => {
    initPage();
  });
});

onUnload(() => {
  uni.$off(notification);
});

const type = ref("");
const subChange = (e) => {
  type.value = e.value;
  initPage();
};
const records = ref([]);
const triggered = ref(false);
const loading = ref(false);
const loadStatus = ref("loading");
const current = ref(1);
const size = ref(6);
const noData = computed(() => {
  return (records || []).length === 0 && !loading;
});

const handleClickCell = (item) => {
  let url =
    item.type === "video"
      ? "/pages/article/camera/player"
      : "/pages/article/recorder/player";
  uni.$u.route({
    url,
    params: {
      reciteId: item.id,
      id:item.article_info.id,
      readonly: true,
    },
  });
};

const listSheet = ref([{ name: "删除" }]);

const showSheet = ref(false);
const selectId = ref("");
const handleClickOperate = (id) => {
  selectId.value = id;
  showSheet.value = true;
};
const selectClose = () => {
  showSheet.value = false;
};
const selectClick = (item) => {
  const target = toRaw(item);
  if (target.name === "删除") {
    deleteRecords(selectId.value);
  }
};

const deleteRecords = async (id) => {
  try {
    let { code } = await deleteRecite({ id: id });
    if (code === 0) {
      reloadList();
      showToast("删除成功", true);
    }
  } catch (e) {
    console.log(e);
    //TODO handle the exception
  }
};

const initPage = () => {
  if (getToken()) {
    reloadList();
  } else {
    records.value = [];
    loading.value = false;
  }
};

const reloadList = () => {
  current.value = 1;
  loadStatus.value = "loading";
  getList();
};
const getList = async () => {
  if (current.value == 1) {
    records.value = [];
  }
  loading.value = true;
  try {
    let params = {
      offset: (current.value-1)*size.value,
      limit: size.value,
      type :type.value
    };
    let res = await getReciteList(params);
    let { count } = res;
    if (res.data) {
      res.data.map((e) => {
        e.type = e.video ? "video" : "audio";
      });
      console.log(res.data);
      records.value.push(...res.data);
      // 更新底部加载状态
      loadStatus.value = count > records.value.length ? "loadmore" : "nomore";
    }
    setTimeout(() => {
      nextTick(() => {
        if (triggered.value) {
          triggered.value = false;
        }
      });
    }, 500);
  } catch (e) {
    //TODO handle the exception
    loadStatus.value = "loadmore";
    console.log("error", e);
    nextTick(() => {
      if (triggered.value) {
        triggered.value = false;
      }
    });
  }
  loading.value = false;
};
const onRefresh = () => {
  if (triggered.value) return;
  triggered.value = true; // 需要重置
  reloadList();
};
const onRestore = () => {
  triggered.value = false; // 需要重置
};
// 滚动底部
const reachBottom = () => {
  if (loadStatus.value !== "loadmore") return;
  current.value += 1;
  loadStatus.value = "loading";
  getList();
};
</script>

<style lang="scss">
.records-video {
  .u-action-sheet__cancel {
    padding: 0;
    .u-action-sheet__cancel-text {
      padding: 0;
    }
  }
}
</style>
<style lang="scss" scoped>
.video {
  position: relative;
  height: 100vh;
  background: #ffffff;
  display: flex;
  flex-direction: column;

  .background {
    width: 100%;
    height: 780rpx;
    top: 0;
    left: 0;
    position: absolute;
    background: linear-gradient(180deg, #90e4ed 0%, #ffffff 100%);
  }

  .content {
    height: 100%;
    overflow: auto;
    position: relative;
    z-index: 10;
    padding: 48rpx 32rpx;
  }
}
</style>
